<template>
  <slider ref="slider" :autoPlay="false" :data-w="width" :height="width*0.7*0.372" :list="banners" @sliderClick="onSliderClick" />
</template>

<script>
  import Slider from '@/components/Slider'
  export default {
    name: 'banner',
    props: {
      banners: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data () {
      return {
        width: 1000
      }
    },
    components: {
      Slider
    },
    deactivated () {
      this.$refs.slider.pause()
      window.removeEventListener('resize', this.handleResize)
    },
    activated () {
      this.$nextTick(() => {
        var dom = this.$refs.slider.$el.parentNode
        this.width = dom.clientWidth || 1000
      })
      window.addEventListener('resize', this.handleResize)
    },
    mounted () {
      this.$nextTick(() => {
        var dom = this.$refs.slider.$el.parentNode
        this.width = dom.clientWidth || 1000
      })
      window.addEventListener('resize', this.handleResize)
    },
    methods: {
      onSliderClick (i, item) {
        if (item.url) {
          this.$electron.remote.shell.openExternal(item.url)
        }
      },
      handleResize () {
        this.$nextTick(() => {
          var dom = this.$refs.slider.$el.parentNode
          this.width = dom.clientWidth
        })
      }
    }
  }
</script>
